<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" cellpadding="20" cellspacing="20">
        <tbody>
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>

            <tr>
                <td>小猫</td>
                <td>html</td>
                <td>99</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        // 创建学生数组
        let objarr = [{
            name: '杀杀杀',
            major: 'css',
            score: 800
        }, {
            name: '杀杀杀2',
            major: 'css2',
            score: 801
        }, {
            name: '杀杀杀3',
            major: 'css3',
            score: 802
        }, {
            name: '杀杀杀4',
            major: 'css4',
            score: 803
        }];
        // let btn = document.querySelector('button');
        let tbody = document.querySelector('tbody');
        objarr.forEach(function(ele, index) {
            // let tr = document.createElement('tr');
            // tbody.appendChild(tr);
            // for (let key in ele) {
            //     let td = document.createElement('td');
            //     td.innerHTML = ele[key];
            //     tr.appendChild(td);
            // }
            // let td = document.createElement('td');
            // td.innerHTML = ' <button>删除</button>';
            // tr.appendChild(td);

            tbody.innerHTML += `<tr>
                                     <td>${ele['name']}</td>
                                     <td>${ele['major']}</td>
                                     <td>${ele['score']}</td>
                                     <td>
                                      <button>删除</button>
                                     </td>
                                </tr>
                                `
        })
        console.log(tbody);
        // btn.addEventListener('click', function() {
        //     console.log(this.parentNode.parentNode); // td 到 tr
        //     this.parentNode.parentNode.remove(); // 删除
        // })

        let btns = document.querySelectorAll('button');
        btns.forEach(function(ele, index) {
            ele.addEventListener('click', function() {
                // this.parentNode.parentNode.remove();
                tbody.removeChild(this.parentNode.parentNode);
            })
        })
    </script>
</body>

</html>